<div class="am-container">
<img src="https://img.alicdn.com/imgextra/i1/2452636188/TB2uAw4bVXXXXaaXpXXXXXXXXXX-2452636188.jpg"/>

    <h1 class="am-serif">
        妹子wap前端框架学习
    </h1>
    <h3>导航</h3>
    <ol class="am-breadcrumb">
        <li><a href="#" class="am-icon-home">首页</a></li>
        <li><a href="#">分类</a></li>
        <li class="am-active">内容</li>
    </ol>

    <h3>评论</h3>
    <article class="am-comment">
        <a href="#link-to-user-home">
            <img src="" alt="" class="am-comment-avatar" width="48" height="48"/>
        </a>

        <div class="am-comment-main">
            <header class="am-comment-hd">
                <!--<h3 class="am-comment-title">评论标题</h3>-->
                <div class="am-comment-meta">
                    <a href="#link-to-user" class="am-comment-author">某人</a>
                    评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
                </div>
            </header>

            <div class="am-comment-bd">
                那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？
            </div>
        </div>
    </article>

    <h3>图标</h3>
    <span class="am-icon-qq"> QQ</span>
    <span class="am-icon-weixin"> Wechat</span>
    <h3></h3>
    <a href="" class="am-icon-btn am-icon-twitter"></a>
    <a href="" class="am-icon-btn am-icon-facebook"></a>
    <a href="" class="am-icon-btn am-icon-github"></a>

    <h3>旋转动画</h3>
    <i class="am-icon-spinner am-icon-spin"></i>
    <i class="am-icon-refresh am-icon-spin"></i>
    <i class="am-icon-circle-o-notch am-icon-spin"></i>
    <i class="am-icon-cog am-icon-spin"></i>
    <i class="am-icon-gear am-icon-spin"></i>

    <h3>小图标</h3>
    <i class="am-icon-globe"></i>
    <i class="am-icon-male"></i>
    <i class="am-icon-folder am-icon-md"></i>
    <i class="am-icon-folder am-icon-lg"></i>
    <i class="am-icon-trash am-icon-lg"></i>


    <h3>字体</h3>
    <div class="am-serif">The quick brown fox jumps over the lazy dog.
        千万不要因为走得太久，而忘记了我们为什么出发。
        千萬不要因為走得太久，而忘記了我們為什麼出發。</div>

    <h3>段</h3>
    <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>

    <h3>分隔线</h3>
    <hr/>

    <h3>引用blockquote</h3>
    <blockquote>
        <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
        <small>马尔克斯 ——《百年孤独》</small>
    </blockquote>

    <h3>代码块pre</h3>
    <pre>window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    </pre>

    <h3>网格</h3>
    <table class="am-table am-table-bd am-table-striped am-text-nowrap">
        <tr><td>测试</td><td>测试</td></tr>
        <tr><td>测试</td><td>测试</td></tr>
        <tr><td>测试</td><td>测试</td></tr>
        <tr><td>测试</td><td>测试</td></tr>
    </table>

    <h3>垂直居中</h3>
    <div class="am-vertical-align" style="height: 150px;">
        <div class="am-vertical-align-middle">
            飘在半空中的 XX
        </div>
    </div>

    <h3>按钮</h3>
    <button type="button" class="am-btn am-btn-default am-round">默认样式</button>
    <button type="button" class="am-btn am-btn-primary am-round">主色按钮</button>
    <button type="button" class="am-btn am-btn-secondary am-round">次色按钮</button>
    <button type="button" class="am-btn am-btn-success">绿色按钮</button>
    <button type="button" class="am-btn am-btn-warning">橙色按钮</button>
    <button type="button" class="am-btn am-btn-danger">红色按钮</button>
    <a class="am-btn am-btn-link">链接</a>
    <a class="am-btn am-btn-default">应用按钮样式的链接</a>

    <h3>按钮图片</h3>
    <button class="am-btn am-btn-default">
        <i class="am-icon-cog"></i>
        设置
    </button>

    <a class="am-btn am-btn-warning" href="#">
        <i class="am-icon-shopping-cart"></i>
        结账
    </a>

    <button class="am-btn am-btn-default">
        <i class="am-icon-spinner am-icon-spin"></i>
        加载中
    </button>

    <button class="am-btn am-btn-primary">
        下载
        <i class="am-icon-cloud-download"></i>
    </button>

    <h3>js控件</h3>
    <div class="am-alert" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <h3>共同渡过</h3>
        <p>《共同渡过》是张国荣1987年发行的专辑《Summer Romance》中的一首歌。</p>
        <ul>
            <li>若我可再活多一次都盼</li>
            <li>再可以在路途重逢着你</li>
            <li>共去写一生的句子</li>
            <li>若我可再活多一次千次</li>
            <li>我都盼面前仍是你</li>
            <li>我要他生都有今生的暖意</li>
        </ul>
    </div>
    <script>
        $(function(){
            $(".am-close").click(function(){
                $('.am-alert').alert()
            });

        })
    </script>
    <h3></h3>
    <section data-am-widget="accordion" class="am-accordion am-accordion-default"
             data-am-accordion='{ "multiple": true }'>
        <dl class="am-accordion-item am-active">
            <dt class="am-accordion-title">就这样恣意的活着</dt>
            <dd class="am-accordion-content am-collapse am-in">置身人群中
                <br/>你只需要被淹没 享受 沉默
                <br/>退到人群后
                <br/>你只需给予双手 微笑 等候</dd>
        </dl>
        <dl class="am-accordion-item">
            <dt class="am-accordion-title">让生命去等候，去等候，去等候，去等候</dt>
            <dd class="am-accordion-content am-collapse ">走在忠孝东路
                <br/>徘徊在茫然中
                <br/>在我的人生旅途
                <br/>选择了多少错误
                <br/>我在睡梦中惊醒
                <br/>感叹悔言无尽
                <br/>恨我不能说服自己
                <br/>接受一切教训
                <br/>让生命去等候
                <br/>等候下一个漂流
                <br/>让生命去等候
                <br/>等候下一个伤口</dd>
        </dl>
        <dl class="am-accordion-item">
            <dt class="am-accordion-title">我就这样告别山下的家</dt>
            <dd class="am-accordion-content am-collapse ">我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？</dd>
        </dl>
    </section>



    <ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
  md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-gallery="{ pureview: true }">
        <li>
            <div class="am-gallery-item">
                <a href="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg">
                    <img src="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg"
                         alt="远方 有一个地方 那里种有我们的梦想" />
                    <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                    <div class="am-gallery-desc">2375-09-26</div>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg">
                    <img src="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg"
                         alt="某天 也许会相遇 相遇在这个好地方" />
                    <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
                    <div class="am-gallery-desc">2375-09-26</div>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg">
                    <img src="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg"
                         alt="不要太担心 只因为我相信" />
                    <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
                    <div class="am-gallery-desc">2375-09-26</div>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg">
                    <img src="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg"
                         alt="终会走过这条遥远的道路" />
                    <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
                    <div class="am-gallery-desc">2375-09-26</div>
                </a>
            </div>
        </li>
    </ul>
    <h3></h3>
    <div data-am-widget="tabs" class="am-tabs am-tabs-default">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active">
                <a href="[data-tab-panel-0]">青春</a>
            </li>
            <li class="">
                <a href="[data-tab-panel-1]">彩虹</a>
            </li>
            <li class="">
                <a href="[data-tab-panel-2]">歌唱</a>
            </li>
        </ul>
        <div class="am-tabs-bd">
            <div data-tab-panel-0 class="am-tab-panel am-active">【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。</div>
            <div
                    data-tab-panel-1 class="am-tab-panel ">【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。</div>
            <div
                    data-tab-panel-2 class="am-tab-panel ">【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。</div>
        </div>
    </div>

    <h3></h3>
    <div data-am-widget="map" class="am-map am-map-default" data-name="JSON博客"
         data-address="上海市静安区南京西路1515号1802室" data-longitude="" data-latitude="">
        <div id="bd-map"></div>
    </div>

    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <div class="am-footer-switch">
            <span class="am-footer-ysp" data-rel="mobile" data-am-modal="{target: '#am-switch-mode'}"><a href="<?=site_url('wap/test/css');?>">手机版</a></span>
            <span class="am-footer-divider">|</span>
            <span class="am-footer-ysp" data-rel="mobile" data-am-modal="{target: '#am-switch-mode'}"><a href="<?=site_url('home/test/css');?>">电脑版</a></span>
            <!--<a id="godesktop" data-rel="desktop" class="am-footer-desktop"
               href="<?= site_url( 'home/home/index' ); ?>">电脑版</a>-->
        </div>
        <div class="am-footer-miscs ">
            <p>由
                <a href="http://www.yunshipei.com/" title="诺亚方舟" target="_blank">JSON</a>提供技术支持</p>
            <p>CopyRight©2015 AllMobilize Inc.</p>
            <p>沪ICP备147258369</p>
        </div>
    </footer>
    <div id="am-footer-modal" class="am-modal am-modal-no-btn am-switch-mode-m am-switch-mode-m-default">
        <div class="am-modal-dialog">
            <div class="am-modal-hd am-modal-footer-hd">
                <a href="javascript:void(0)" data-dismiss="modal" class="am-close am-close-spin"
                   data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">您正在浏览的是
                <span class="am-switch-mode-owner">JSON博客</span>
                <span class="am-switch-mode-slogan">为您当前手机订制的移动网站。</span>
            </div>
        </div>
    </div>


</div>